<!-- 流程表单 -->
<template>
  <div class="flow-form-container">
    <!-- 预览 -->
    <section v-if="flowNodes && flowNodes.length > 0" class="flow-preview-box">
      <!-- <div class="flow-preview-title">审批流程</div> -->
      <div class="flow-preview-nodes">
        <a-timeline mode="left">
          <template v-for="node in flowNodes" :key="node.id">
            <a-timeline-item
              label=""
              :dotColor="flowTimeLineDotColors[node.nodeType].color"
            >
              <!-- 开始节点 -->
              <div class="node-box" v-if="node.nodeType == 'START_ENV'">
                <div class="node-name">开始</div>
              </div>
              <!-- 条件节点 -->
              <div class="node-box" v-if="node.nodeType == 'CONDITION'">
                <div class="node-name">
                  {{ node.nodeName }}
                  <div class="node-type"><icon-branch /></div>
                </div>
              </div>
              <!-- 审批人节点 -->
              <div class="node-box" v-else-if="node.nodeType == 'AUDIT'">
                <div class="node-name">
                  审批
                  <div class="node-type" v-if="node.auto == 1">自动通过</div>
                  <div class="node-type" v-if="node.auto == 2">自动拒绝</div>
                  <template v-if="node.auto == 0">
                    <div
                      class="node-type"
                      v-if="node.multiType == MULTI_TYPE[1]"
                    >
                      需所有人审批同意
                    </div>
                    <div
                      class="node-type"
                      v-if="node.multiType == MULTI_TYPE[2]"
                    >
                      只需一人审批同意
                    </div>
                    <div
                      class="node-type"
                      v-if="node.multiType == MULTI_TYPE[3]"
                    >
                      需依次审批同意
                    </div>
                  </template>
                </div>
                <div class="node-content" v-if="node.auto == 0">
                  <!-- 如是发起人自选 -->
                  <div
                    v-if="node.assigneeTypeEnum == ASSIGNEE_TYPE[7]"
                    class="initator-chioce"
                  >
                    <a-button size="small" @click="onChooseUserClicked()">
                      <template #icon><icon-plus /></template>
                    </a-button>
                    <span class="assignee-list">
                      <flow-node-avatar
                        v-for="userId in flowNodeDesignees[node.id]"
                        :key="userId"
                        :size="20"
                        :id="userId"
                        class="assignee-item"
                      />
                    </span>
                    <OrganChooseBox
                      v-if="showChooseUser"
                      v-model:visible="showChooseUser"
                      v-model:selected="flowNodeDesignees[node.id]"
                      :hidden-dept="true"
                      :hidden-role="true"
                    />
                  </div>
                  <template v-else>
                    <!-- 审批人为空时 -->
                    <div class="node-null-assignee">
                      <template v-if="node.flowNodeNoAuditorType == 'SKIP'">
                        <div class="null-tooltip">没有审批人，自动通过</div>
                      </template>
                      <template
                        v-else-if="node.flowNodeNoAuditorType == 'USER'"
                      >
                        <div class="null-tooltip">没有审批人，指定人员审批</div>
                        <flow-node-avatar
                          :size="20"
                          :id="node.flowNodeNoAuditorAssignee"
                          class="assignee-item"
                        />
                      </template>
                      <template v-else-if="node.flowNodeNoAuditorType == 2">
                        <div class="null-tooltip">
                          没有审批人，转交给流程管理员
                        </div>
                        <flow-node-avatar
                          :size="20"
                          :id="node.flowNodeAuditAdmin"
                          class="assignee-item"
                        />
                      </template>
                    </div>
                    <div class="node-assignee">
                      <template
                        v-if="
                          node.assigneeTypeEnum
                            ?.split(',')
                            .includes(ASSIGNEE_TYPE[4])
                        "
                      >
                        <flow-node-avatar
                          v-for="userId in node.assignee?.split(',')"
                          :key="userId"
                          :size="20"
                          :id="userId"
                          class="assignee-item"
                        />
                      </template>
                      <template
                        v-if="
                          node.assigneeTypeEnum
                            ?.split(',')
                            .includes(ASSIGNEE_TYPE[3])
                        "
                      >
                        <flow-node-role-avatar
                          v-for="roleId in node.assigneeRole?.split(',')"
                          :key="roleId"
                          :size="20"
                          :id="roleId"
                          class="assignee-item"
                        />
                      </template>
                      <div class="null-tooltip">
                        {{ filterAssigneeType(node.assigneeTypeEnum) || "" }}
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <!-- 办理人节点 -->
              <div class="node-box" v-else-if="node.nodeType == 'USER_TASK'">
                <div class="node-name">
                  办理
                  <div class="node-type" v-if="node.multiType == MULTI_TYPE[1]">
                    需所有人办理同意
                  </div>
                  <div class="node-type" v-if="node.multiType == MULTI_TYPE[2]">
                    只需一人办理同意
                  </div>
                  <div class="node-type" v-if="node.multiType == MULTI_TYPE[3]">
                    需依次办理同意
                  </div>
                </div>
                <div class="node-content">
                  <div
                    v-if="node.assigneeTypeEnum == ASSIGNEE_TYPE[7]"
                    class="initator-chioce"
                  >
                    <a-button size="small" @click="onChooseUserClicked()">
                      <template #icon><icon-plus /></template>
                    </a-button>
                    <span class="assignee-list">
                      <flow-node-avatar
                        v-for="userId in flowNodeDesignees[node.id]"
                        :key="userId"
                        :size="20"
                        :id="userId"
                        class="assignee-item"
                      />
                    </span>
                    <OrganChooseBox
                      v-if="showChooseUser"
                      v-model:visible="showChooseUser"
                      v-model:selected="flowNodeDesignees[node.id]"
                      :hidden-dept="true"
                      :hidden-role="true"
                    />
                  </div>
                  <template v-else>
                    <!-- 办理人为空时 -->
                    <div class="node-null-assignee" v-if="node.auto == 0">
                      <template v-if="node.flowNodeNoAuditorType == 'USER'">
                        <div class="null-tooltip">没有办理人，指定人员办理</div>
                        <flow-node-avatar
                          :size="20"
                          :id="node.flowNodeNoAuditorAssignee"
                          class="assignee-item"
                        />
                      </template>
                      <template v-else-if="node.flowNodeNoAuditorType == 2">
                        <div class="null-tooltip">
                          没有办理人，转交给审批管理员
                        </div>
                        <flow-node-avatar
                          :size="20"
                          :id="node.flowNodeAuditAdmin"
                          class="assignee-item"
                        />
                      </template>
                    </div>
                    <div class="node-assignee">
                      <template
                        v-if="
                          node.assigneeTypeEnum
                            ?.split(',')
                            .includes(ASSIGNEE_TYPE[4])
                        "
                      >
                        <flow-node-avatar
                          v-for="userId in node.assignee?.split(',')"
                          :key="userId"
                          :size="20"
                          :id="userId"
                          class="assignee-item"
                        />
                      </template>
                      <template
                        v-if="
                          node.assigneeTypeEnum
                            ?.split(',')
                            .includes(ASSIGNEE_TYPE[3])
                        "
                      >
                        <flow-node-role-avatar
                          v-for="roleId in node.assigneeRole?.split(',')"
                          :key="roleId"
                          :size="20"
                          :id="roleId"
                          class="assignee-item"
                        />
                      </template>
                      <div class="null-tooltip">
                        {{ filterAssigneeType(node.assigneeTypeEnum) || "" }}
                      </div>
                    </div>
                  </template>
                </div>
              </div>
              <!-- 抄送人节点 -->
              <div class="node-box" v-else-if="node.nodeType == 'COPY'">
                <div class="node-name">抄送</div>
                <div class="node-content">
                  <div
                    v-if="node.assigneeTypeEnum == ASSIGNEE_TYPE[7]"
                    class="initator-chioce"
                  >
                    <a-button size="small" @click="onChooseUserClicked()">
                      <template #icon><icon-plus /></template>
                    </a-button>
                    <span class="assignee-list">
                      <flow-node-avatar
                        v-for="userId in flowNodeDesignees[node.id]"
                        :key="userId"
                        :size="20"
                        :id="userId"
                        class="assignee-item"
                      />
                    </span>
                    <OrganChooseBox
                      v-if="showChooseUser"
                      v-model:visible="showChooseUser"
                      v-model:selected="flowNodeDesignees[node.id]"
                      :hidden-dept="true"
                      :hidden-role="true"
                    />
                  </div>
                  <div v-else class="node-cc">
                    <template
                      v-if="
                        node.assigneeTypeEnum
                          ?.split(',')
                          .includes(ASSIGNEE_TYPE[4])
                      "
                    >
                      <flow-node-avatar
                        v-for="userId in node.assignee?.split(',')"
                        :key="userId"
                        :size="20"
                        :id="userId"
                        class="assignee-item"
                      />
                    </template>
                    <template
                      v-if="
                        node.assigneeTypeEnum
                          ?.split(',')
                          .includes(ASSIGNEE_TYPE[3])
                      "
                    >
                      <flow-node-role-avatar
                        v-for="roleId in node.assigneeRole?.split(',')"
                        :key="roleId"
                        :size="20"
                        :id="roleId"
                        class="assignee-item"
                      />
                    </template>
                    <div class="null-tooltip">
                      {{ filterAssigneeType(node.assigneeTypeEnum) || "" }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 结束节点 -->
              <div class="node-box" v-else-if="node.nodeType == 'END_ENV'">
                <div class="node-name">结束</div>
              </div>
            </a-timeline-item>
          </template>
        </a-timeline>
      </div>
    </section>
    <div class="empty-box" v-else>
      <a-empty></a-empty>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, computed } from "vue";
import { useOrganStore } from "@/stores";
import ObjectUtil from "@/components/flow/common/ObjectUtil";
import FlowInstApi from "@/api/FlowInstApi";
import { Message } from "@arco-design/web-vue";
import {
  IconPlus,
  IconInfoCircle,
  IconBranch,
} from "@arco-design/web-vue/es/icon";
import OrganChooseBox from "@/components/flow/dialog/OrganChooseBox.vue";
import FlowNodeAvatar from "@/components/common/FlowNodeAvatar.vue";
import FlowNodeRoleAvatar from "@/components/common/FlowNodeRoleAvatar.vue";
import {
  NODE,
  WIDGET,
  ASSIGNEE_TYPE,
  MULTI_TYPE,
  SAME_TYPE,
} from "@/components/flow/common/FlowConstant";

let props = defineProps({
  modelId: { type: String, default: null },
  assignees: { type: Object, default: () => {} },
});

let emits = defineEmits(["update:assignees"]);

let flowNodes = ref([]); // 预览的流程节点
let flowNodeDesignees = ref({}); // 流程节点指定的执行人

let flowTimeLineDotColors = reactive({}); // 时间线点的颜色
flowTimeLineDotColors["START_ENV"] = { color: "#a9b4cd" };
flowTimeLineDotColors["AUDIT"] = { color: "#ff943e" };
flowTimeLineDotColors["COPY"] = { color: "#3296fa" };
flowTimeLineDotColors["GATEWAY"] = { color: "#165DFF" };
flowTimeLineDotColors["CONDITION"] = { color: "#168CFF" };
flowTimeLineDotColors["USER_TASK"] = { color: "#926bd5" };
flowTimeLineDotColors["END_ENV"] = { color: "#a9b4cd" };
// GATEWAY CONDITION CONDITION

let showChooseUser = ref(false);
const onChooseUserClicked = () => (showChooseUser.value = true);

const filterAssigneeType = (type) => {
  let typeArr = type?.split(",") || "";
  let types = [];
  if (typeArr.includes(ASSIGNEE_TYPE[0])) {
    types.push("发起人本人");
  }
  if (typeArr.includes(ASSIGNEE_TYPE[1])) {
    types.push("直属上级");
  }
  if (typeArr.includes(ASSIGNEE_TYPE[2])) {
    types.push("部门负责人");
  }
  if (typeArr.includes(ASSIGNEE_TYPE[5])) {
    types.push("连续多级上级");
  }
  if (typeArr.includes(ASSIGNEE_TYPE[6])) {
    types.push("连续多级部门负责人");
  }
  if (typeArr.includes(ASSIGNEE_TYPE[8])) {
    types.push("表单内人员");
  }
  console.log("types", types);
  return types.join(",");
};

let selfChoiceList = computed(() => {
  return flowNodes.value.filter((node) => {
    return node.assigneeTypeEnum == ASSIGNEE_TYPE[7];
  });
});
// 流程节点
const getFlowNodes = () => {
  FlowInstApi.nodeQuery({
    modelId: props.modelId,
  }).then((resp) => {
    if (resp.code == 0) {
      let list = resp.data.records || [];
      flowNodes.value = list.filter((item) => {
        return item.nodeType != "GATEWAY";
      });
    }
  });
};

onMounted(() => {
  console.log("onMounted");
  getFlowNodes();
});
defineExpose({ flowNodeDesignees, selfChoiceList });
</script>

<style lang="less" scoped>
@import "@/styles/variables.module.less";

.flow-form-container {
  padding: 0 10px;

  .flow-form-box {
    .field-item {
      margin-bottom: 10px;
    }

    .flow-inst-widget {
      width: 100%;

      .flow-inst-widget-btn {
        height: 32px;
        display: flex;
        align-items: center;
      }

      .flow-inst-list {
        display: grid;
        gap: 6px;
      }
    }

    .describe {
      color: var(--color-text-2);
      font-size: 13px;
      background-color: var(--color-fill-2);
      border-radius: var(--border-radius-small);
      padding: 4px 12px;
      cursor: default;
      margin-bottom: 10px;
      min-height: 32px;

      svg {
        margin-right: 5px;
      }
    }
  }

  .flow-preview-box {
    user-select: none;

    .flow-preview-nodes {
      margin-top: 8px;

      .node-box {
        .node-name {
          display: flex;
          flex-direction: row;
          align-items: baseline;

          .node-type {
            font-size: 12px;
            color: #8f959e;
            margin-left: 4px;
          }
        }

        .node-content {
          margin-bottom: 30px;

          .node-assignee,
          .node-cc {
            margin-top: 4px;
            display: flex;
            flex-flow: row wrap;
            gap: 6px;
            align-items: center;
          }

          .node-null-assignee {
            .assignee-item {
              margin-top: 4px;
              max-width: 70px;
            }
          }

          .null-tooltip {
            font-weight: 400;
            color: #86909c;
            font-size: 12px;
          }

          .initator-chioce {
            margin-top: 4px;
            display: flex;

            .assignee-list {
              flex: 1;
              margin-left: 10px;
              display: grid;
              gap: 4px;
              grid-template-columns: repeat(
                auto-fill,
                minmax(70px, max-content)
              );
            }
          }
        }
      }
    }
  }

  .flow-btn-box {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
  }
}
</style>

<style lang="less">
.flow-form-container {
  .arco-form {
    .arco-form-item-label-col {
      margin-bottom: 0;

      .arco-form-item-label {
        font-size: 13px;
        color: #999;
      }
    }

    .arco-upload-list.arco-upload-list-type-text
      .arco-upload-list-item:first-of-type,
    .arco-upload-list.arco-upload-list-type-picture
      .arco-upload-list-item:first-of-type {
      margin-top: 10px;
    }

    .arco-upload-list-item-operation,
    .arco-upload-list-picture-operation {
      font-size: 16px;

      .arco-icon {
        font-size: 16px;
      }
    }
  }

  .arco-timeline {
    .arco-timeline-item {
      &:last-child {
        min-height: 0;
      }
    }
  }
}
</style>
